<template>
  <div style="width:1000px;height:400px" :id="id"></div>
</template>

<script>
import G2 from '@antv/G2'

export default {
  props: {
    id: String,
    charData: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      charts: null
    }
  },
  mounted () {
    this.drawChart(this.charData)
  },
  watch: {
    charData (val, oldVal) {
      this.drawChart(val)
    }
  },
  methods: {
    drawChart (datas) {
      console.log(datas)
      this.charts = new G2.Chart({
        id: this.id,
        height: 400,
        width: 400,
        // padding: [20, 20, 20, 20],
        forceFit: true// 随宽度变化
      })
      // this.charts.coord().transpose()
      this.charts.legend({
        title: '属性图' // 不展示图例的标题
        // marker: 'square' // 设置图例 marker 的显示样式
      })
      this.charts.source(datas)
      this.charts.point().position('strftime*value').color('value')
      // this.charts.intervalDodge().position('strftime*value').color('#757373')
      // this.charts('value', {
      //   line: {
      //     lineWidth: 2,
      //     stroke: 'red'
      //   }
      // })
      this.charts.render()
      // this.chart && this.chart.destroy()
      //   // 创建对象
      // this.chart = new G2S.Chart({
      //   id: this.id, // 指定容器id
      //   width: 1000, // 指定图表宽度
      //   height: 250// 指定图表高度
      // })
    //   // 载入数据源
    //   this.chart.source(datas)
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
